<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
<!--      <el-form-item label="就诊人ID" prop="patientId">
        <el-input v-model="formData.patientId" placeholder="请输入就诊人ID" />
      </el-form-item>-->
      <el-form-item label="就诊人" prop="patientName">
        <el-input disabled v-model="formData.patientName" placeholder="请输入就诊人姓名（冗余）" />
      </el-form-item>
<!--      <el-form-item label="录入医生ID" prop="doctorId">
        <el-input v-model="formData.doctorId" placeholder="请输入录入医生ID" />
      </el-form-item>
      <el-form-item label="录入医生姓名（冗余）" prop="doctorName">
        <el-input v-model="formData.doctorName" placeholder="请输入录入医生姓名（冗余）" />
      </el-form-item>-->
      <el-divider><h3>治疗目的</h3></el-divider>
      <el-form-item label="新辅助" prop="zlmdXfz">
        <el-input v-model="formData.zlmdXfz" placeholder="请输入新辅助" />
      </el-form-item>
      <el-form-item label="首选方案" prop="zlmdSxfa">
        <el-input v-model="formData.zlmdSxfa" placeholder="请输入首选方案" />
      </el-form-item>
      <el-form-item label="手术后辅助" prop="zlmdSshfz">
        <el-input v-model="formData.zlmdSshfz" placeholder="请输入手术后辅助" />
      </el-form-item>
      <el-form-item label="放疗后辅助" prop="zlmdFlhfz">
        <el-input v-model="formData.zlmdFlhfz" placeholder="请输入放疗后辅助" />
      </el-form-item>
      <el-form-item label="手术+放疗后辅助" prop="zlmdSsflhfz">
        <el-input v-model="formData.zlmdSsflhfz" placeholder="请输入手术+放疗后辅助" />
      </el-form-item>
      <el-divider><h3>治疗信息</h3></el-divider>
<!--      <el-form-item label="治疗信息" prop="zlxx">
        <el-input v-model="formData.zlxx" placeholder="请输入治疗信息" />
      </el-form-item>-->
      <el-space fill style="width: 100%">
        <el-row type="flex" class="row-bg" justify="end" style="width: 100%">
          <el-col :span="3"><el-button @click="addInfoJsonObj" type="primary">新 增</el-button></el-col>
        </el-row>
        <el-row v-for="(option, idx) in formData.zlxx" :key="idx" justify="space-between">
          <el-col :span="2">
            <el-form-item label-width="auto" label="次数" prop="count">
              <span>{{option.count = (idx + 1)}}</span>
            </el-form-item>
          </el-col>&nbsp;
          <el-col :span="6">
            <el-form-item label-width="auto" label="治疗日期" prop="date">
              <el-date-picker
                v-model="option.date"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择治疗日期"
              />
            </el-form-item>
          </el-col>&nbsp;
          <el-col :span="6">
            <el-form-item label-width="auto" label="去势" prop="qsfa">
              <el-input v-model="option.qsfa" placeholder="请填写去势"/>
            </el-form-item>
          </el-col>&nbsp;
          <el-col :span="6">
            <el-form-item label-width="auto" label="抗雄" prop="kxfa">
              <el-input v-model="option.kxfa" placeholder="请填写抗雄"/>
            </el-form-item>
          </el-col>&nbsp;
          <el-col :span="3">
            <el-button @click="removeInfoJsonObj(idx)" type="danger">删 除</el-button>
          </el-col>
        </el-row>
      </el-space>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { PatientNfmzlApi, PatientNfmzl } from '@/api/business/patientnfmzl'

/** 内分泌治疗 表单 */
defineOptions({ name: 'PatientNfmzlForm' })


function addInfoJsonObj() {
  formData.value.zlxx.push({title: "", content: ""})
}
function removeInfoJsonObj(idx: number) {
  formData.value.zlxx.splice(idx, 1);
}


const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  patientId: undefined,
  patientName: undefined,
  doctorId: undefined,
  doctorName: undefined,
  zlmdXfz: undefined,
  zlmdSxfa: undefined,
  zlmdSshfz: undefined,
  zlmdFlhfz: undefined,
  zlmdSsflhfz: undefined,
  zlxx: [],
})
const formRules = reactive({
  patientId: [{ required: true, message: '就诊人ID不能为空', trigger: 'blur' }],
  patientName: [{ required: true, message: '就诊人姓名（冗余）不能为空', trigger: 'blur' }],
  doctorId: [{ required: true, message: '录入医生ID不能为空', trigger: 'blur' }],
  doctorName: [{ required: true, message: '录入医生姓名（冗余）不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()

  formData.value.patientId = route.query.id
  formData.value.patientName = route.query.name
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await PatientNfmzlApi.getPatientNfmzl(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as PatientNfmzl
    if (formType.value === 'create') {
      await PatientNfmzlApi.createPatientNfmzl(data)
      message.success(t('common.createSuccess'))
    } else {
      await PatientNfmzlApi.updatePatientNfmzl(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    patientId: undefined,
    patientName: undefined,
    doctorId: undefined,
    doctorName: undefined,
    zlmdXfz: undefined,
    zlmdSxfa: undefined,
    zlmdSshfz: undefined,
    zlmdFlhfz: undefined,
    zlmdSsflhfz: undefined,
    zlxx: [],
  }
  formRef.value?.resetFields()
}

const route = useRoute() // 路由
const router = useRouter() // 路由

/** 初始化 **/
onMounted(() => {
  // 如果就诊人 ID 不存在，显示错误提示并关闭页面
  if (!route.query.id) {
    message.error('就诊人 ID 不存在，无法查看就诊记录')
    // 关闭当前路由，返回到就诊人列表页面
    router.push({ name: 'UserPatient' })
    return
  }
})
</script>
